<script setup lang="ts">

import HomeHeader from "../components/header/HomeHeader.vue";
import AqiDistributionChart from "../components/charts/AqiDistributionChart.vue";
import ProvinceCoverageChart from "../components/charts/ProvinceCoverageChart.vue";
import AqiTrendChart from "../components/charts/AqiTrendChart.vue";
import AqiRealTimeStatistic from "../components/charts/AqiRealTimeStatistic.vue";
import ConcentrationExceedChart from "../components/charts/ConcentrationExceedChart.vue";
import ChinaMapChart from "../components/charts/ChinaMapChart.vue";
</script>

<template>
  <div class="main-home-box">
    <HomeHeader/>
    <div class="absolute top-28 h-5/6 w-full flex justify-center">
    <div id="right-col" class="  w-2/5 h-full flex flex-col">
      <ProvinceCoverageChart/>
      <AqiDistributionChart/>
      <AqiTrendChart/>
    </div>
    <div id="middle-col" class="  w-3/5 h-full flex flex-col">
      <ChinaMapChart/>
    <AqiRealTimeStatistic/>
    </div>
    <div id="right-col" class="  w-2/5 h-full flex flex-col">
      <ConcentrationExceedChart/>
    </div>
    </div>
  </div>
</template>

<style scoped>
.main-home-box {
  background: #000d4a url(@/assets/bg.jpg) center top;
  width: 100%;
  height: 100%;
  background-size: cover;
}

.boxall {
  border: 1px solid rgba(25, 186, 139, .17);
  padding: 0 .2rem .2rem .15rem;
  background: rgba(255, 255, 255, .04) url(@/assets/line.png);
  background-size: 100% auto;
  margin-bottom: .15rem;
  z-index: 10;
}

.boxall:before,
.boxall:after {
  position: absolute;
  width: .1rem;
  height: .1rem;
  content: "";
  border-top: 2px solid #02a6b5;
  top: 0;
}

.boxall:before, .boxfoot:before {
  border-left: 2px solid #02a6b5;
  left: 0;
}

.boxall:after, .boxfoot:after {
  border-right: 2px solid #02a6b5;
  right: 0;
}
</style>
